<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="commons/css::css">head</th:block>
</head>

<body class="flat-blue">
<i style="display: none;" id="_manager_url" url="/star/category/manager"></i>
<div class="app-container">
    <div class="row content-container">
        <th:block th:include="commons/nav_head::nav">head</th:block>
        <th:block th:include="commons/side::side">side</th:block>
        <!-- Main Content -->
        <div class="container-fluid">
            <div class="side-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <label th:text="${starCategory.id}?'修改':'添加'"></label>素材分类
                            </div>
                            <div class="panel-body form-group">
                                <form class="form-horizontal" enctype="multipart/form-data" role="form" id="actionForm" name="actionForm" method="post" th:action="@{/star/category/save}">
                                    <div class="form-group">
                                        <label for="categoryName" class="col-sm-2 control-label">名称</label>
                                        <div class="col-sm-4">
                                            <input type="text" id="categoryName" name="categoryName" required th:value="${starCategory.categoryName}" class="form-control">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="imgUrl" class="col-sm-2 control-label">图片</label>
                                        <div class="col-sm-4">
                                            <input type="hidden" id="id" name="id" th:value="${starCategory.id}">
                                            <input type="hidden" id="imgUrl" name="imgUrl" th:value="${starCategory.imgUrl}">
                                            <input type="file" style="display: none;" id="imgUrlFile" name="imgUrlFile">
                                            <img th:src="${starCategory.imgUrl}?${starCategory.imgUrl}:@{/public/images/plus23.png}" onclick="$('#imgUrlFile').click();" id="preview" style="height: 150px; width: 150px;">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="description" class="col-sm-2 control-label">描述</label>
                                        <div class="col-sm-4">
                                            <textarea id="description" name="description" rows="7" cols="40" th:text="${starCategory.description}">

                                            </textarea>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-3">
                                            <button type="button" class="btn btn-info" id="btn-submit">
                                                <span class="fa fa-adjust"> 提交</span>
                                            </button>
                                            <button type="button" class="btn btn-info" onclick="document.location.replace(ctx + '/star/category/manager');">
                                                <span class="glyphicon glyphicon-backward"> 返回</span>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<th:block th:include="commons/js::js">Javascript Libs</th:block>
<script type="text/javascript">

    $(function () {

        $("#btn-submit").click(function () {
            // 提交表单
            var actionForm = $("#actionForm");
            var valid = actionForm.valid();
            if (!valid) {
                return;
            }
            var imgUrlFile = $("#imgUrlFile")[0].files.length;
            var imgUrl = $("#imgUrl").val();
            if (imgUrlFile < 1 && $.trim(imgUrl).length < 1) {
                Alert("请选择文件");
                return;
            }
            actionForm.ajaxSubmit(function (rtn) {
                if(rtn.code != 1) {
                    Alert(rtn.message);
                    return;
                }
                Alert("操作成功", function () {
                    document.location.replace(ctx + "/star/category/manager");
                });
            })
        });

        $("#imgUrlFile").change(function (e) {
            if (window.FileReader) {
                var reader = new FileReader();
            } else {
                Alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
            }
            //获取文件
            var fileDom = e.target;
            var file = fileDom.files[0];
            var imageType = /^image\//;
            //是否是图片
            if (!imageType.test(file.type)) {
                alert("请选择图片！");
                return;
            }
            //读取完成
            reader.onload = function (e) {
                //获取图片dom
                var img = document.getElementById("preview");
                //图片路径设置为读取的图片
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        });
    });
</script>
</html>